<script setup>

const open = (url) => {
  window.open(url, 'black')
}

new WOW().init()
</script>

<template>
  <div class="flex mt-10 sm:mt-32">
    <div class="flex-1 sm:max-w-4xl">
      <div class="flex flex-col mx-3 items-start font-Inter text-base space-y-3 sm:text-xl sm:space-y-10">
          <span class="wow animated animate__bounceIn animate__slower text-xl sm:text-4xl text-accent font-semibold">{{
              $t('text1')
            }}</span>
        <img src="/@/assets/imgs/index-logo.png" alt="" class="max-w-[400px]">
        <span class="wow animated animate__bounceIn ">{{ $t('text2') }}</span>
        <span class="wow animated animate__bounceIn ">{{ $t('text3') }}</span>
        <span class="wow animated animate__bounceIn ">{{ $t('text4') }}</span>
        <span class="wow animated animate__bounceIn ">{{ $t('text5') }}</span>
        <button class="btn btn-primary btn-lg" @click="open('https://avascriptions.com/market/token?tick=dino')"><span
            class="text-base-100">{{ $t('buy') }}</span></button>
        <div class="flex space-x-3">
          <button class="wow animated animate__swing "
                  @click="open('https://avascriptions.com/market/token?tick=dino')"><img class="w-[150px] h-[150px]"
                                                                                         src="/@/assets/imgs/btn1.png"/>
          </button>
          <button class="wow animated animate__swing " @click="open('https://t.me/Dino_ASC20')"><img
              class="w-[150px] h-[150px]"
              src="/@/assets/imgs/btn2.png"/></button>
          <button class="wow animated animate__swing " @click="open('https://twitter.com/asc20_dino')"><img
              class="w-[150px] h-[150px]"
              src="/@/assets/imgs/btn3.png"/></button>
        </div>
      </div>
    </div>
  </div>
  <div class="flex flex-col mx-3 md:flex-row md:space-x-12 xl:space-x-32">
    <div class="flex flex-col items-center">
      <img src="/@/assets/imgs/bg-left.png" alt="" class="wow animated animate__bounceIn  w-[300px] sm:max-w-[500px]">
    </div>
    <div class="flex flex-1 flex-col items-start font-Inter text-base space-y-3 sm:text-xl sm:space-y-10">
        <span class="wow animated animate__bounceIn animate__slower  text-xl sm:text-4xl text-accent font-semibold">{{
            $t('text6')
          }}</span>
      <span class="wow animated animate__bounceIn">{{ $t('text7') }}</span>
      <span class="wow animated animate__bounceIn">{{ $t('text8') }}</span>
      <div class="flex space-x-8">
        <button class="btn btn-write sm:btn-lg" @click="open('https://docs.avascriptions.com/asc-20')"><span
            class="text-secondary">{{ $t('text9') }}</span></button>
        <button class="btn btn-primary sm:btn-lg" @click="open('https://docs.avascriptions.com/developer-service')">
          <span class="text-base-100">{{ $t('text10') }}</span></button>
      </div>
    </div>
  </div>
  <div class="flex flex-col space-y-10 mx-3 md:flex-row md:space-x-12 xl:space-x-32">
    <div class="flex flex-1 flex-col items-start font-Inter text-base sm:text-xl sm:space-y-10">
        <span class="wow animated animate__bounceIn animate__slower text-xl sm:text-4xl text-accent font-semibold">{{
            $t('text12')
          }}</span>
      <span class="wow animated animate__bounceIn">{{ $t('text13') }}</span>
      <span class="wow animated animate__bounceIn">{{ $t('text14') }}</span>
      <div class="flex sm:space-x-10">
        <div class="flex flex-col space-y-2">
          <span class="text-accent text-4xl font-bold">$33M</span>
          <span class="text-accent text-2xl font-bold">USD</span>
          <span class="text-accent text-xl font-bold">Transaction Fee Paid</span>
        </div>
        <div class="flex flex-col space-y-2">
          <span class="text-accent text-4xl font-bold">61M</span>
          <span class="text-accent text-xl font-bold">Global transactions</span>
        </div>
      </div>
    </div>
    <div class="flex flex-col items-center ">
      <img src="/@/assets/imgs/biaoge.png" alt=""
           class="wow animated animate__fadeInRight animate__slower max-w-[500px]">
    </div>
  </div>
  <div class="flex flex-col space-y-10 mx-3 md:flex-row md:space-x-12 xl:space-x-32">
    <div class="flex flex-col items-center">
      <img src="/@/assets/imgs/bg-left2.png" alt=""
           class="wow animated animate__fadeInLeft animate__slower max-w-[500px]">
    </div>
    <div class="flex flex-1 flex-col items-start font-Inter text-base sm:text-xl sm:space-y-10">
        <span class="wow animated animate__bounceIn animate__slower text-xl sm:text-4xl text-accent font-semibold">{{
            $t('text16')
          }}</span>
      <span class="wow animated animate__bounceIn"> {{ $t('text17') }}</span>
      <span class="wow animated animate__bounceIn">- &nbsp {{ $t('text18') }}</span>
      <span class="wow animated animate__bounceIn">- &nbsp {{ $t('text19') }}</span>
      <span class="wow animated animate__bounceIn">- &nbsp {{ $t('text20') }}</span>
    </div>
  </div>
  <div class="flex flex-col space-y-10 mx-3 md:flex-row md:space-x-12 xl:space-x-32">
    <div class="flex flex-1 flex-col items-start font-Inter text-base sm:text-xl sm:space-y-10">
        <span class="wow animated animate__bounceIn animate__slower text-xl sm:text-4xl text-accent font-semibold">{{
            $t('text21')
          }}</span>
      <span class="wow animated animate__bounceIn">{{ $t('text22') }}</span>
      <span class="wow animated animate__bounceIn">{{ $t('text23') }}</span>
      <span class="wow animated animate__bounceIn">{{ $t('text24') }}</span>
      <div class="flex flex-col space-y-6">
        <button class="btn btn-primary btn-lg btn-[100px]">
          <div class="flex space-x-3 items-center" @click="open('https://t.me/Asc20Dino_En')">
            <i class="fa-brands fa-telegram text-2xl "></i>
            <span class="text-base-100">{{ $t('text25') }}</span>
          </div>
        </button>
        <button class="btn btn-primary btn-lg btn-[100px]" @click="open('https://t.me/Dino_ASC20')">
          <div class="flex space-x-3 items-center">
            <i class="fa-brands fa-telegram text-2xl"></i>
            <span class="text-base-100">{{ $t('text26') }}</span>
          </div>
        </button>
      </div>
    </div>
    <div class="flex flex-none max-w-xl flex-col items-start font-Inter text-base sm:text-xl sm:space-y-10">
      <div tabindex="0" class="wow animated animate__fadeInLeft collapse collapse-arrow border  ">
        <div class="collapse-title text-xl font-medium">
          {{ $t('text27') }}
        </div>
        <div class="collapse-content">
          <p>{{ $t('text30') }}</p>
          <p>{{ $t('text31') }}</p>
        </div>
      </div>
      <div tabindex="0" class="wow animated animate__fadeInLeft collapse collapse-arrow border  ">
        <div class="collapse-title text-xl font-medium">
          {{ $t('text28') }}
        </div>
        <div class="collapse-content">
          <p>{{ $t('text32') }}</p>
        </div>
      </div>
      <div tabindex="0" class="wow animated animate__fadeInLeft collapse collapse-arrow border">
        <div class="collapse-title text-xl font-medium">
          {{ $t('text29') }}
        </div>
        <div class="collapse-content">
          <p>{{ $t('text34') }} <br>
            {{ $t('text35') }}<br>
            {{ $t('text36') }}<br>
            {{ $t('text37') }}<br>
            {{ $t('text38') }}<br>
            {{ $t('text39') }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>